<%-- 
    Document   : search
    Created on : Nov 12, 2013, 12:08:23 AM
    Author     : Shin
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery Auto Complete</title>
        <link href="css/style.css" rel="stylesheet"> 
            <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
            <script type="text/javascript">
                function lookup(inputString) {
                    if (inputString.length === 0) {
                        $('#suggestions').hide();
                    } else {
                        $.post("List.jsp", {queryString: "" + inputString + ""}, function(data) {
                            if (data.length > 0) {
                                $('#suggestions').show();
                                $('#autoSuggestionsList').html(data);

                            }
                        });
                    }
                }
                function fill(thisValue) {
                    $('#inputString').val(thisValue);
                    setTimeout("$('#suggestions').hide();", 200);
                }
            </script>

    </head>
    <body>
        <div>
            <form name="search" method="post" action="SearchServlet">
                <div> <h3><font color="red">Search</states></font></h3> <br /> Input Keyword:


                    <input name="input" type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />

                    <input type="submit" value="Cari"></input>

                </div>
                <div class="suggestionsBox" id="suggestions" style="display: none;">
                    <div class="suggestionList" id="autoSuggestionsList">
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>